<template>
    <el-carousel indicator-position="outside" arrow="never" :autoplay="false" :height="height">
      <el-carousel-item v-for="index in 3" :key="index">
        <el-carousel direction="vertical" :autoplay="false" :height="height">
          <el-carousel-item v-for="count in ['q','w','e']" :key="count">
            <keep-alive v-if="count+index === 'q1'">
              <HexbinCenters :height="height"></HexbinCenters>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'q2'">
              <StreamgraphTransitions cid="st1" :height="height"></StreamgraphTransitions>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'q3'">
              <VoronoiLabels cid="vl" :height="height"></VoronoiLabels>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'w1'">
              <ForceDirectedGraph cid="fdg" :height="height"></ForceDirectedGraph>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'w2'">
              <ParallelCoordinates cid="pc" :height="height"></ParallelCoordinates>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'w3'">
              <DotPlot cid="dp" :height="height"></DotPlot>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'e1'">
              <RadialAreaChart cid="rac" :height="height"></RadialAreaChart>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'e2'">
              <Occlusion cid="ol" :height="height"></Occlusion>
            </keep-alive>
            <keep-alive v-else-if="count+index === 'e3'">
              <ChordDiagram cid="cd" :height="height"></ChordDiagram>
            </keep-alive>
          </el-carousel-item>
        </el-carousel>
      </el-carousel-item>
    </el-carousel>
</template>

<script>
import HexbinCenters from './HexbinCenters.vue'
import StreamgraphTransitions from './StreamgraphTransitions'
// import StreamgraphTransitions2 from './StreamgraphTransitions2'
import ForceDirectedGraph from './ForceDirectedGraph'
import ParallelCoordinates from './ParallelCoordinates'
import DotPlot from './DotPlot'
import RadialAreaChart from './RadialAreaChart'
import Occlusion from './Occlusion'
// import WorldAirportsVoronoi from './WorldAirportsVoronoi'
import ChordDiagram from './ChordDiagram'
import VoronoiLabels from  './VoronoiLabels'

export default {
  name: 'HelloWorld',
  data(){
    return {
      height: '500px'
    }
  },
  components:{
    HexbinCenters,
    StreamgraphTransitions,
    // StreamgraphTransitions2,
    ForceDirectedGraph,
    ParallelCoordinates,
    DotPlot,
    RadialAreaChart,
    Occlusion,
    // WorldAirportsVoronoi,
    ChordDiagram,
    VoronoiLabels
  },
  props: []
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end
}
.item{
  flex-grow:1;
  flex-shrink:1;
}
.sub{
  max-width: 300px;
  min-width: 200px;
  flex-grow:1;
  flex-shrink:0;
}
</style>
